// Prefix
@css-prefix: car;

@font-family: 'Roboto', sans-serif;

// Animation
@animation-time : .3s;
@transition-time : .2s;
@ease-in-out : ease-in-out;

@assets-root: '/assets';
@images-root: '/img/';
@fonts-root: '/fonts/';
@font-thin: 100;
@font-light: 300;
@font-normal: 400;
@font-bold: 700;
@font-bolder: 500;
@font-ultraBold: 900;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-xs-max: (@screen-xs-min - 1);

// Small screen / tablet
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-sm-max: (@screen-sm-min - 1);

// Medium screen / desktop
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-md-max: (@screen-md-min - 1);

// Large screen / wide desktop
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-max: (@screen-lg-min - 1);

//
// Colors
//
@color-tint: 9;
@color-tint-dark: @color-tint;
@color-tint-darker: @color-tint * 2;
@color-tint-light: @color-tint;
@color-tint-lighter: @color-tint * 2;

@color-black: #111;
@color-grey: #B0BEC5;
@color-white: #FFF;
@color-beige: #F2F2EA;
@color-red: #F44336;
@color-pink: #E91E63;
@color-purple: #9C27B0;
@color-blue: #2196F3;
@color-green: #4CAF50;
@color-cyan: #00BCD4;
@color-yellow: #FFEB3B;
@color-orange: #FF9800;
@color-brown: #795548;

@color-brand: #2C3E50;
@color-info: @color-blue;
@color-warning: @color-orange;
@color-success: @color-green;
@color-error: @color-red;

@color-default: darken(@color-grey,@color-tint-dark);
@color-disabled: darken(@color-grey, @color-tint-dark);
@color-quiet: darken(@color-grey, @color-tint-dark);

//
// all color
//
@black: @color-black;
@grey: @color-grey;
@white: @color-white;
@beige: @color-beige;
@red: @color-red;
@pink: @color-pink;
@purple: @color-purple;
@blue: @color-blue;
@green: @color-green;
@cyan: @color-cyan;
@yellow: @color-yellow;
@orange: @color-orange;
@brown: @color-brown;
@brand: @color-brand;
@info: @color-info;
@warning: @color-warning;
@success: @color-success;
@error: @color-error;
@default: @color-default;
@disabled: @color-disabled;
@quiet: @color-quiet;
@grey-dark: darken(@color-grey, @color-tint-dark);
@red-dark: darken(@color-red, @color-tint-dark);
@pink-dark: darken(@color-pink, @color-tint-dark);
@purple-dark: darken(@color-purple, @color-tint-dark);
@blue-dark: darken(@color-blue, @color-tint-dark);
@green-dark: darken(@color-green, @color-tint-dark);
@cyan-dark: darken(@color-cyan, @color-tint-dark);
@yellow-dark: darken(@color-yellow, @color-tint-dark);
@orange-dark: darken(@color-orange, @color-tint-dark);
@brown-dark: darken(@color-brown, @color-tint-dark);
@grey-darker: darken(@color-grey, @color-tint-darker);
@red-darker: darken(@color-red, @color-tint-darker);
@grey-light: lighten(@color-grey, @color-tint-light);
@red-light: lighten(@color-red, @color-tint-light);
@pink-light: lighten(@color-pink, @color-tint-light);
@purple-light: lighten(@color-purple, @color-tint-light);
@blue-light: lighten(@color-blue, @color-tint-light);
@green-light: lighten(@color-green, @color-tint-light);
@cyan-light: lighten(@color-cyan, @color-tint-light);
@yellow-light: lighten(@color-yellow, @color-tint-light);
@orange-light: lighten(@color-orange, @color-tint-light);
@brown-light: lighten(@color-brown, @color-tint-light);
@grey-lighter: lighten(@color-grey, @color-tint-lighter);
@red-lighter: lighten(@color-red, @color-tint-lighter);
@pink-lighter: lighten(@color-pink, @color-tint-lighter);
@purple-lighter: lighten(@color-purple, @color-tint-lighter);
@blue-lighter: lighten(@color-blue, @color-tint-lighter);
@green-lighter: lighten(@color-green, @color-tint-lighter);
@cyan-lighter: lighten(@color-cyan, @color-tint-lighter);
@yellow-lighter: lighten(@color-yellow, @color-tint-lighter);
@orange-lighter: lighten(@color-orange, @color-tint-lighter);
@brown-lighter: lighten(@color-brown, @color-tint-lighter);
@pink-darker: darken(@color-pink, @color-tint-darker);
@purple-darker: darken(@color-purple, @color-tint-darker);
@blue-darker: darken(@color-blue, @color-tint-darker);
@green-darker: darken(@color-green, @color-tint-darker);
@cyan-darker: darken(@color-cyan, @color-tint-darker);
@yellow-darker: darken(@color-yellow, @color-tint-darker);
@orange-darker: darken(@color-orange, @color-tint-darker);
@brown-darker: darken(@color-brown, @color-tint-darker);
@brand-dark: darken(@color-brand, @color-tint-dark);
@brand-darker: darken(@color-brand, @color-tint-darker);
@brand-light: lighten(@color-brand, @color-tint-light);
@brand-lighter: lighten(@color-brand, @color-tint-lighter);
@info-dark: darken(@color-info, @color-tint-dark);
@info-darker: darken(@color-info, @color-tint-darker);
@info-light: lighten(@color-info, @color-tint-light);
@info-lighter: lighten(@color-info, @color-tint-lighter);
@warning-dark: darken(@color-warning, @color-tint-dark);
@warning-darker: darken(@color-warning, @color-tint-darker);
@warning-light: lighten(@color-warning, @color-tint-light);
@warning-lighter: lighten(@color-warning, @color-tint-lighter);
@success-dark: darken(@color-success, @color-tint-dark);
@success-darker: darken(@color-success, @color-tint-darker);
@success-light: lighten(@color-success, @color-tint-light);
@success-lighter: lighten(@color-success, @color-tint-lighter);
@error-dark: darken(@color-error, @color-tint-dark);
@error-darker: darken(@color-error, @color-tint-darker);
@error-light: lighten(@color-error, @color-tint-light);
@error-lighter: lighten(@color-error, @color-tint-lighter);

//
// Typography
//
@text-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif ;
@text-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif ;
@text-font-family-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace ;
@text-font-size-super: 2em;
@text-font-size-xlarge: 1.5em;
@text-font-size-large: 1.25em;
@text-font-size-medium: 1em;
@text-font-size-small: .8em;
@text-font-size-xsmall: .67em;
@text-font-weight: normal;
@text-font-weight-heavy: bold ;
@text-line-height: 1.55 ;
@text-color: @black ;
@highlight-padding: @spacing-xsmall @spacing-xsmall @spacing-tiny ;
@highlight-margin: 0 -@spacing-tiny ;
@highlight-color: @black ;
@highlight-background-color: @yellow;
@help-border-bottom: @border-width dashed @grey-dark ;
@paragraph-padding: @spacing-small 0 ;
@paragraph-margin: 0 ;
@paragraph-font-style: normal ;
@code-color: @text-color ;
@code-background-color: @grey-lighter;
@code-font-family: @text-font-family-mono;
@code-font-weight: @text-font-weight;
@code-multiline-padding: @spacing-small @spacing-medium;
@code-multiline-border-radius: @border-radius;
@keyboard-color: @white;
@keyboard-background-color: @grey-dark;
@keyboard-border-width: 2px;
@keyboard-border-style: @border-style;
@keyboard-border-color: @grey-darker;
@keyboard-border: @keyboard-border-width @keyboard-border-style @keyboard-border-color;
@keyboard-border-radius: @border-radius;
@quotation-padding: @spacing-medium @spacing-large;
@quotation-margin: 0 ;
@quotation-color: @quiet;
@quotation-font-size: @text-font-size-large ;
@quotation-font-family: @text-font-family-serif ;
@quotation-border-width: 5px ;
@quotation-border-style: @border-style;
@quotation-border-color: @color-default;
@quotation-brand-border-color: @brand;
@quotation-info-border-color: @info;
@quotation-warning-border-color: @warning;
@quotation-success-border-color: @success;
@quotation-error-border-color: @error;
@quotation-footer-color: @quiet;
@quotation-footer-font-style: italic;

//
// Addresses
//
@address-font-style: normal;
@address-heading-font-weight: @text-font-weight-heavy;

//
// Avatar
//
@avatar-margin: 0;
@avatar-background-color: @color-brand;
@avatar-color: @color-white;
@avatar-img-border-radius: @border-radius-rounded;
@avatar-inner-img-size: 50%;
@avatar-xsmall-size: 1em;
@avatar-small-size: 2em;
@avatar-medium-size: 3em;
@avatar-large-size: 4em;
@avatar-xlarge-size: 5em;
@avatar-super-size: 6em;

//
// Z-index
//
@zindex-spin: 8;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-content: 100;
@zindex-control: 200;
@zindex-page: 300;
@zindex-screen: 400;
@zindex-everything: 500;
@zindex-select: 900;
@zindex-modal: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-tooltip: 1060;
@zindex-transfer: 1060;
@zindex-loading-bar: 2000;

//
// Borders
//
@border-width: 1px;
@border-style: solid;
@border-color: @color-default;

//
// Border radius
//
@border-radius: 4px;
@border-radius-rounded: 30em;

//
// Box shadows
//
@box-shadow: 0 0 1px rgba(17, 17, 17, .6);
@box-shadow-high: 0 0 1px rgba(17, 17, 17, .6), 0 5px 10px -3px rgba(17, 17, 17, .4);
@box-shadow-higher: 0 0 1px rgba(17, 17, 17, .6), 0 10px 25px -4px rgba(17, 17, 17, .4);
@box-shadow-highest: 0 0 1px rgba(17, 17, 17, .6), 0 20px 55px -8px rgba(17, 17, 17, .4);

//
// Focus styles
//
@border-color-focus: @blue;
@box-shadow-focus: inset 0 0 0 2px lighten(@border-color-focus, @color-tint);

//
// Typography
//
@text-line-height: 1.55;

//
// font-size
//
@font-size-primary: 16px;


//
// Spacing
//
@spacing-super: 3em;
@spacing-xlarge: 2em;
@spacing-large: 1.5em;
@spacing-medium: 1em;
@spacing-small: .5em;
@spacing-xsmall: .25em;
@spacing-tiny: .125em;

//
// Links
//
@link-color: @blue-dark;
@link-brand-color: @brand;
@link-info-color: @info;
@link-warning-color: @warning;
@link-success-color: @success;
@link-error-color: @error;
@link-text-decoration: none;
@link-hover-text-decoration: underline;

//
// Lists
//
@list-margin: 0;
@list-padding: 0 0 0 @spacing-medium;
@list-unstyled-padding: 0;
@list-unstyled-list-style: none;
@list-nested-padding: @list-padding;
@list-item-padding: 0;
@list-item-unstyled-list-style: none;
@list-ordered-item-padding: 0 @spacing-small 0 0;
@list-inline-padding: 0;
@list-inline-item-padding-right: @spacing-medium;
@list-inline-item-bullet-content: "\2022";
@list-inline-item-bullet-padding: 0 @spacing-small 0 0;

//
// Badges
//
@badge-padding: @spacing-xsmall @spacing-small;
@badge-margin: 0;
@badge-background-color: @color-default;
@badge-color: @white;
@badge-line-height: 1.2;
@badge-brand-background-color: @brand;
@badge-brand-color: @white;
@badge-info-background-color: @info;
@badge-info-color: @white;
@badge-warning-background-color: @warning;
@badge-warning-color: @white;
@badge-success-background-color: @success;
@badge-success-color: @white;
@badge-error-background-color: @error;
@badge-error-color: @white;
@badge-font-size: .8em;
@badge-font-weight: @text-font-weight-heavy;
@badge-border-width: @border-width;
@badge-border-style: @border-style;
@badge-border-color: transparent;
@badge-border: @badge-border-width @badge-border-style @badge-border-color;
@badge-border-radius: @border-radius;
@badge-border-radius-rounded: @border-radius-rounded;
@badge-ghost-background-color: transparent;
@badge-ghost-brand-background-color: transparent;
@badge-ghost-info-background-color: transparent;
@badge-ghost-warning-background-color: transparent;
@badge-ghost-success-background-color: transparent;
@badge-ghost-error-background-color: transparent;
@badge-ghost-color: @color-default;
@badge-ghost-brand-color: @brand;
@badge-ghost-info-color: @info;
@badge-ghost-warning-color: @warning;
@badge-ghost-success-color: @success;
@badge-ghost-error-color: @error;

//
// Bubbles
//
@bubble-padding: @spacing-medium;
@bubble-background-color: @black;
@bubble-color: @white;
@bubble-text-align: center;
@bubble-border-radius: @border-radius;
@bubble-arrow-width: 10px;

//
// Buttons
//
@button-padding: @spacing-small;
@button-margin: 0;
@button-color: @white;
@button-background-color: @color-default;
@button-brand-color: @white;
@button-brand-background-color: @brand;
@button-info-color: @white;
@button-info-background-color: @info;
@button-warning-color: @white;
@button-warning-background-color: @warning;
@button-success-color: @white;
@button-success-background-color: @success;
@button-error-color: @white;
@button-error-background-color: @error;
@button-disabled-opacity: .5;
@button-font-family: inherit;
@button-font-size: 1em;
@button-line-height: normal;
@button-text-align: center;
@button-white-space: nowrap;
@button-border-width: @border-width;
@button-border-style: @border-style;
@button-border-color: transparent;
@button-border: @button-border-width @button-border-style @button-border-color;
@button-border-radius: @border-radius;
@button-focus-border-color: @border-color-focus;
@button-focus-box-shadow: @box-shadow-focus;
@button-ghost-color: @border-color;
@button-ghost-hover-color: @white;
@button-ghost-brand-color: @brand;
@button-ghost-brand-hover-color: @white;
@button-ghost-info-color: @info;
@button-ghost-info-hover-color: @white;
@button-ghost-warning-color: @warning;
@button-ghost-warning-hover-color: @white;
@button-ghost-success-color: @success;
@button-ghost-success-hover-color: @white;
@button-ghost-error-color: @error;
@button-ghost-error-hover-color: @white;
@button-ghost-border-width: @button-border-width;
@button-ghost-border-style: @button-border-style;
@button-rounded-border-radius: @border-radius-rounded;
@button-close-font-weight: @text-font-weight-heavy;
@button-close-font-size: 1.4em;
@button-icon-left-padding: @spacing-small;
@button-icon-right-padding: @spacing-small;
@button-super-font-size: @text-font-size-super;
@button-xlarge-font-size: @text-font-size-xlarge;
@button-large-font-size: @text-font-size-large;
@button-medium-font-size: @text-font-size-medium;
@button-small-font-size: @text-font-size-small;
@button-xsmall-font-size: @text-font-size-xsmall;

//
// Cards
//
@card-margin: @spacing-small 0 0 0;
@card-width: 100%;
@card-max-height: 280px;
@card-background-color: white;
@card-z-index: @zindex-content;
@card-box-shadow: @box-shadow;
@card-border-radius: @border-radius;

@card-image-padding: @spacing-medium 0 0;
@card-header-padding: @spacing-medium @spacing-medium 0;
@card-body-padding: @spacing-medium;
@card-footer-padding: @spacing-medium;
@card-footer-block-padding: @spacing-small 0 0;

@card-item-padding: @spacing-small;
@card-item-border-width: @border-width;
@card-item-border-style: @border-style;
@card-item-border-color: rgba(202, 212, 216, .5);
@card-item-border-bottom: @card-item-border-width @card-item-border-style @card-item-border-color;

@card-item-hover-background-color: @grey-lighter;
@card-item-hover-color: @grey-lighter;

@card-item-active-background-color: @card-item-border-color;
@card-item-active-font-weight: @text-font-weight-heavy;

@card-item-disabled-opacity: .6;

@card-item-divider-background-color: @grey-dark;
@card-item-divider-color: @white;
@card-item-divider-font-weight: @text-font-weight-heavy;

@card-item-brand-background-color: @brand;
@card-item-info-background-color: @info;
@card-item-warning-background-color: @warning;
@card-item-success-background-color: @success;
@card-item-error-background-color: @error;

@card-item-brand-color: @white;
@card-item-info-color: @white;
@card-item-warning-color: @white;
@card-item-success-color: @white;
@card-item-error-color: @white;

@card-item-brand-hover-background-color: @brand-light;
@card-item-info-hover-background-color: @info-light;
@card-item-warning-hover-background-color: @warning-light;
@card-item-success-hover-background-color: @success-light;
@card-item-error-hover-background-color: @error-light;

@card-item-brand-active-background-color: @brand-dark;
@card-item-info-active-background-color: @info-dark;
@card-item-warning-active-background-color: @warning-dark;
@card-item-success-active-background-color: @success-dark;
@card-item-error-active-background-color: @error-dark;

@card-accordion-chevron-border: 2px solid;
@card-accordion-chevron-size: .75em;

//
// Headings
//
@heading-margin: 0;
@heading-padding: @spacing-medium 0 @spacing-small;
@heading-font-weight: @text-font-weight;
@heading-subheading-padding: 0;
@heading-subheading-opacity: .6;
@heading-subheading-font-size: @text-font-size-medium * .8;

//
// Hints
//
@hint-padding: 0 @spacing-small;
@hint-color: @grey-darker;
@hint-font-size: @text-font-size-medium;
@hint-success-color: @success;
@hint-error-color: @error;

//
// Inputs
//
@label-padding: @spacing-medium 0;
@label-field-margin: @spacing-small 0 0 0;
@field-padding: @spacing-small;
@field-margin: 0;
@field-color: inherit;
@field-background-color: @white;
@field-font-size: @text-font-size-medium;
@field-font-size-super: @text-font-size-super;
@field-font-size-xlarge: @text-font-size-xlarge;
@field-font-size-large: @text-font-size-large;
@field-font-size-medium: @text-font-size-medium;
@field-font-size-small: @text-font-size-small;
@field-font-size-xsmall: @text-font-size-xsmall;
@field-font-weight: @text-font-weight;
@field-border-width: @border-width;
@field-border-style: @border-style;
@field-border-color: @border-color;
@field-border: @field-border-width @field-border-style @field-border-color;
@field-border-radius: @border-radius;
@field-focus-border-color: @border-color-focus;
@field-focus-box-shadow: @box-shadow-focus;
@field-disabled-background-color: @grey-lighter;
@field-disabled-border-color: @border-color;
@field-disabled-color: @disabled;
@field-error-border-color: @error;
@field-error-color: @error;
@field-success-border-color: @success;
@field-success-color: @field-color;
@checkbox-margin: @spacing-tiny;
@checkbox-font-size: @text-font-size-medium;
@checkbox-background-color: transparent;
@checkbox-border: 0;
@fieldset-padding: 0;
@fieldset-margin: @spacing-small 0;
@fieldset-width: 100%;
@fieldset-border: 0;
@legend-padding: @spacing-xsmall 0;
@form-element-padding: @spacing-medium 0;
@form-element-label-padding: 0 0 @spacing-small 0;

//
// Medias
//
@media-image-width: 3em;
@media-body-margin-left: @spacing-small;

//
// Modals
//
@modal-width: 80%;
@modal-background-color: @white;
@modal-border-width: 0;
@modal-border-style: @border-style;
@modal-border-color: @border-color;
@modal-border: @modal-border-width @modal-border-style @modal-border-color;
@modal-border-radius: @border-radius;
@modal-z-index: @zindex-everything;
@modal-header-text-align: center;
@modal-body-padding: @spacing-medium;
@modal-footer-padding: @spacing-medium;
@modal-footer-block-padding: @spacing-large 0 0 0;
@modal-footer-block-button-border-radius: 0;
@modal-ghost-background-color: transparent;
@modal-ghost-color: @white;
@modal-ghost-heading-color: @white;


//
// Navs
//
@nav-height: 3.5em;
@nav-width: 100%;
@nav-padding: 0;
@nav-margin: 0;
@nav-background-color: @black;
@nav-color: @white;
@nav-z-index: @zindex-page;
@nav-light-background-color: @beige;
@nav-light-color: @brown-darker;
@nav-item-padding: @spacing-medium;
@nav-item-letter-spacing: 1px;
@nav-item-hover-background-color: @grey-darker;
@nav-item-hover-color: @white;
@nav-item-brand-hover-background-color: @brand;
@nav-item-brand-hover-color: @white;
@nav-item-info-hover-background-color: @info;
@nav-item-info-hover-color: @white;
@nav-item-warning-hover-background-color: @warning;
@nav-item-warning-hover-color: @white;
@nav-item-success-hover-background-color: @success;
@nav-item-success-hover-color: @white;
@nav-item-error-hover-background-color: @error;
@nav-item-error-hover-color: @white;
@nav-item-active-background-color: @grey-darker;
@nav-item-active-color: @white;
@nav-item-brand-active-background-color: @brand;
@nav-item-brand-active-color: @white;
@nav-item-info-active-background-color: @info;
@nav-item-info-active-color: @white;
@nav-item-warning-active-background-color: @warning;
@nav-item-warning-active-color: @white;
@nav-item-success-active-background-color: @success;
@nav-item-success-active-color: @white;
@nav-item-error-active-background-color: @error;
@nav-item-error-active-color: @white;

//
// Tables
//
@table-width: 100%;
@table-margin: 0;
@table-padding: 0;
@table-border-width: @border-width;
@table-border-style: @border-style;
@table-border-color: @border-color;
@table-border: 0;
@table-caption-padding: @spacing-small 0;
@table-caption-color: @quiet;
@table-caption-max-width: 100%;
@table-caption-font-size: @text-font-size-small;
@table-caption-text-align: left;
@table-cell-padding: @spacing-small;
@table-cell-text-align: left;
@table-heading-background-color: @grey-light;
@table-heading-color: initial;
@table-heading-border-width: @border-width;
@table-heading-border-style: @border-style;
@table-heading-border-color: @grey;
@table-heading-border: @table-heading-border-width @table-heading-border-style @table-heading-border-color;
@table-heading-font-size: @text-font-size-medium * 1.05;
@table-heading-font-weight: @text-font-weight-heavy;
@table-heading-striped-color: initial;
@table-heading-striped-background-color: @white;
@table-row-striped-color: initial;
@table-row-striped-background-color: @grey-lighter;
@table-row-clickable-color: @link-color;
@table-row-clickable-background-color: initial;
@table-row-disabled-color: @disabled;
@table-row-disabled-background-color: initial;
@table-condensed-font-size: @text-font-size-small;
@table-condensed-cell-padding: @spacing-xsmall;

//
// Overlays
//
@overlay-background-color: @black;
@overlay-z-index: @zindex-screen;
@overlay-transparent-background-color: transparent;

//
// Panels
//
@panel-nav-top: (@spacing-medium * 2) + (@text-line-height * 1em);
@panel-nav-bottom: @panel-nav-top;

//
// Grid
//
@grid-gutter: 1em;

